<template>
<div class="wrapper">
    <div class="container-fluid">
        <div class="page-title-box">
            <div class="btn-group ">
                <ol class="breadcrumb hide-phone p-0 m-0">
                    <li class="breadcrumb-item">
                        <router-link to="/">{{$t('breadcrumb.index')}}</router-link>
                    </li>
                    <li class="breadcrumb-item">{{$t('breadcrumb.copy')}}</li>
                    <li class="breadcrumb-item active">{{$t('breadcrumb.copy.my.history')}}</li>
                </ol>
            </div>
        </div>

        <div id="main" class="card-box">
            <div class="card-title d-flex">
                <div class="form-inline gdjl">
                    <input type="text" class="form-control mr-3" v-model="form.tradeuser" :placeholder="$t('placeholder.copy.account')">
                    <input type="text" class="form-control mr-3" v-model="form.exec_deal" :placeholder="$t('placeholder.order.number')">
                    <select class="custom-select mr-3" v-model="form.type">
                        <option value="" selected>{{$t('placeholder.trade.type')}}</option>
                        <option value="Sell">Sell</option>
                        <option value="Buy">Buy</option>
                    </select>
                    <span class="input-group mr-3">
                        <input type="text" class="form-control date-picker" v-model="form.close_start_time"
                               name="close_start_time"
                               :placeholder="$t('placeholder.close.time')" readonly>
                        <span class="input-group-addon">-</span>
                        <input type="text" class="form-control date-picker" v-model="form.close_end_time"
                               name="close_end_time"
                               :placeholder="$t('placeholder.close.time')" readonly>
                    </span>
                    <button type="button" class="btn btn-primary" @click="search()">{{$t('btn.search')}}</button>
                </div>
            </div>
            <table class="table table-striped table-hover table-sm cxzhgd">
                <thead class="thead-light">
                <tr>
                    <th>{{$t('title.order.number')}}</th>
                    <th>{{$t('title.copy.account')}}</th>
                    <th>{{$t('title.symbol')}}</th>
                    <th>{{$t('title.trade.type')}}</th>
                    <th>{{$t('title.lots')}}</th>
                    <th>{{$t('title.open.time')}}</th>
                    <th>{{$t('title.open.price')}}</th>
                    <th>{{$t('title.close.time')}}</th>
                    <th>{{$t('title.close.price')}}</th>
                    <th>{{$t('title.profit')}}</th>
                    <th>{{$t('title.signal')}}</th>
                </tr>
                </thead>
                <tbody>
                <tr class="hidden" aria-hidden="true" tabindex="-1"></tr>
                <tr v-for="record in records" :key="record.id">
                    <td>{{record.exec_deal}}</td>
                    <td>{{record.tradeuser}}</td>
                    <td>{{record.symbol}}</td>
                    <td>{{record.type}}</td>
                    <td>{{record.volume}}</td>
                    <td>{{record.opentime}}</td>
                    <td>{{record.openprice}}</td>
                    <td>{{record.closetime}}</td>
                    <td>{{record.closeprice}}</td>
                    <td>{{record.profit}}</td>
                    <td>{{record.login}}</td>
                </tr>
                </tbody>
            </table>

            <Pagination :current="page.current"
                        :total-pages="page.totalPages"
                        :total-elements="page.totalElements"
                        :size="page.size"
                        @on-change="load"></Pagination>
        </div>
    </div>
</div>
</template>

<script>
import Pagination from '@/components/Pagination.vue'

export default {
    name: "followMeMyHistory",
    components: {
        Pagination
    },
    data() {
        return {
            records: [],
            page: {
                current: 1,
                totalPages: 1,
                totalElements: 0,
                size: 10
            },
            queryParams: {},
            form: {
                tradeuser: '',
                exec_deal: '',
                type: '',
                open_start_time: '',
                open_end_time: '',
                close_start_time: '',
                close_end_time: '',
            }
        }
    },
    created() {
        const vm = this;
        const vdata = localStorage.getItem("VueData");
        if (vdata) {
            let obj = JSON.parse(vdata);
            for (let key in obj) {
                if (obj.hasOwnProperty(key)) vm[key] = obj[key]
            }
            localStorage.removeItem("VueData");
        }
        window.addEventListener("beforeunload", () => {
            localStorage.setItem("VueData", JSON.stringify(vm._data))
        })
        this.search();
        this.$nextTick(() => {
            $('.date-picker').datetimepicker({
                locale: this.$i18n.locale
            }).on('dp.change', function (e) {
                let name = $(this).attr('name');
                vm.form[name] = e.date.format($.fn.datetimepicker.defaults.format)
            });
        })
    },
    methods: {
        load(page) {
            const vm = this;
            const api = vm.api;
            const http = vm.$http;
            let params = {};
            if (page) {
                params.page = page;
            }
            if (this.queryParams.tradeuser) {
                params.tradeuser = this.queryParams.tradeuser;
            }
            if (this.queryParams.exec_deal) {
                params.exec_deal = this.queryParams.exec_deal;
            }
            if (this.queryParams.type) {
                params.type = this.queryParams.type;
            }
            if (this.queryParams.open_start_time) {
                params.open_start_time = this.queryParams.open_start_time;
            }
            if (this.queryParams.open_end_time) {
                params.open_end_time = this.queryParams.open_end_time;
            }
            if (this.queryParams.close_start_time) {
                params.close_start_time = this.queryParams.close_start_time;
            }
            if (this.queryParams.close_end_time) {
                params.close_end_time = this.queryParams.close_end_time;
            }

            http.get(api + 'FixApply/fixnotes', {params})
                .then(function (response) {
                    const data = response.data;
                    if ('0' === data.code) {
                        vm.records = data.data.list;
                        vm.page = {
                            current: +data.data.pagenum,
                            size: +data.data.sizepage,
                            totalElements: +data.data.count,
                            totalPages: +data.data.totalpage
                        }
                    }
                })
                .catch(function (error) {
                    console.log(error)
                });
        },
        search() {
            this.queryParams = this.form;
            this.load()
        }
    }
}
</script>
